<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.div1 {
			background: #000080;
			border: 1px solid red;
			/*解决代码*/
			width: 98%;
			overflow: auto
		}
		
		.div2 {
			background: #800080;
			border: 1px solid red;
			height: 100px;
			margin-top: 10px;
			width: 98%
		}
		
		.left {
			float: left;
			width: 20%;
			height: 200px;
			background: #DDD
		}
		
		.right {
			float: right;
			width: 30%;
			height: 80px;
			background: #DDD
		}
	</style>

	<body>
		<div class="div1">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
5，父级div定义 overflow:auto 
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 

优点：简单、代码少、浏览器支持好 

缺点：内部宽高超过父级div时，会出现滚动条。 

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 

</html>